<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
    {%include 'nav.html' %} 
    <div class="container">
        <h2>成绩信息管理</h2>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">添加成绩</button>
        <table class="table table-hover">
            <thead>
                <tr>
                    <!-- 课程代码，课程名称，任课教师，学时，上课时间，上课地点； -->
                    <th>学号</th>
                    <th>姓名</th>
                    <th>课程代码</th>
                    <th>课程名称</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="scoreList">
            </tbody>
        </table>
    </div>

    <!-- 添加学生的弹窗 -->
    <div class="modal fade" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">添加成绩</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>学号</label>
                        <input type="text" class="form-control" id="addId" placeholder="请输入学号">
                    </div>
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" class="form-control" id="addName" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label>课程代码</label>
                        <input type="text" class="form-control" id="addIdCard" placeholder="请输入课程代码">
                    </div>
                    <div class="form-group">
                        <label>课程名称</label>
                        <input type="number" class="form-control" id="addAge" placeholder="请输入课程名称">
                    </div>
                    <div class="form-group">
                        <label>成绩</label>
                        <input type="text" class="form-control" id="addWeek" placeholder="请输入成绩">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="addScore">添加</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改学生的弹窗 -->
    <div class="modal fade" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">修改成绩信息</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>学号</label>
                        <input type="text" class="form-control" id="editId" readonly>
                    </div>
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" class="form-control" id="editName">
                    </div>
                    <div class="form-group">
                        <label>课程代码</label>
                        <input type="text" class="form-control" id="editIdCard" placeholder="请输入任课老师">
                    </div>
                    <div class="form-group">
                        <label>课程名称</label>
                        <input type="number" class="form-control" id="editAge">
                    </div>
                    <div class="form-group">
                        <label>成绩</label>
                        <input type="text" class="form-control" id="editWeek">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveStudent">保存</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取课程列表
        $.getJSON('/scores', function (data) {
            $.each(data, function (key, value) {
                var tr = $("<tr></tr>");
                $("<td></td>").text(value.id).appendTo(tr);
                $("<td></td>").text(value.name).appendTo(tr);;
                $("<td></td>").text(value.course_id).appendTo(tr);
                $("<td></td>").text(value.course).appendTo(tr);
                $("<td></td>").text(value.point).appendTo(tr);
                var td = $("<td></td>").appendTo(tr);
                $("<button></button>").text("修改").addClass("btn btn-primary btn-sm").click({
                    id:value.id,
                    name: value.name,
                    course_id: value.course_id,
                    course: value.course,
                    point: value.point,
                }, editStudent).appendTo(td);
                $("<button></button>").text("删除").addClass("btn btn-danger btn-sm").click({id: value.id}, deleteStudent).appendTo(td);
                $("#scoreList").append(tr);
            });
        });

    $("#addScore").click(function () {
            var score = {
                id: $("#addId").val(),
                name: $("#addName").val(),
                course_id: $("#addIdCard").val(),
                course: $("#addAge").val(),
                point: $("#addWeek").val(),
            };
            $.ajax({
                url: '/scores',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(score),
                success: function () {
                    location.reload();
                },
                error: function (xhr, status, error) {
                    alert("添加课程信息失败：" + error);
                }
            });
        });


        // 修改学生信息
        function editStudent(event) {
            $("#editId").val(event.data.id);
            $("#editName").val(event.data.name);
            $("#editIdCard").val(event.data.course_id);
            $("#editAge").val(event.data.course);
            $("#editWeek").val(event.data.point);
            $("#editModal").modal('show');
        }
        $("#saveStudent").click(function () {
            var student = {
                id: $("#editId").val(),
                name: $("#editName").val(),
                course_id: $("#editIdardC").val(),
                course: $("#editAge").val(),
                point: $("#editWeek").val(),
            };
            $.ajax({
                url: '/editScore/' + student.id,
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(student),
                success: function () {
                    location.reload();
                },
                error: function (xhr, status, error) {
                    alert("修改学生信息失败：" + error);
                }
            });
        });

        // 删除学生信息
        // 删除学生信息
        function deleteStudent(event) {
            if (confirm("确定要删除编号为 " + event.data.id + " 的学生信息吗？")) {
        $.ajax({
            url: '/scores/' + event.data.id, // 确保这里的 ID 是正确的分数 ID
            type: 'DELETE',
            success: function () {
                location.reload(); // 删除成功后刷新页面
            },
            error: function (xhr, status, error) {
                // 这里可以提供更详细的错误信息
                alert("删除学生信息失败：" + xhr.responseText || error);
            }
        });
    }
}

    </script>
</body>
</html>
